import React, { Component } from "react";
import {
  Form,
  Input,
  Table,
  Button,
  Row,
  Col,
  Radio,
  Upload,
  Icon,
  message
} from "antd";
import Content from "../../components/Content";
const { Item } = Form;
const { Search } = Input;
const columns = [
  {
    title: "菌株原始编号",
    key: "1",
    dataIndex: "strain_number",
    className: "strain_number"
  },
  {
    title: "近缘菌株最高相似性",
    dataIndex: "other_numberme",
    className: "other_numberme"
  },
  {
    title: "统计",
    dataIndex: "generic_name",
    className: "generic_name"
  }
];

const data = [];
for (let i = 0; i < 6; i++) {
  data.push({
    key: i,
    strain_number: `55855466545`,
    other_numberme: `${i}%`
    // generic_name: `属名 ${i}`,
  });
}

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("You can only upload JPG/PNG file!");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("Image must smaller than 2MB!");
  }
  return isJpgOrPng && isLt2M;
}

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false
  };
  handleChange = info => {
    if (info.file.status === "uploading") {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === "done") {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false
        })
      );
    }
  };
  //上传按钮
  handleChange1 = info => {
    let fileList = [...info.fileList];
    // 1. 限制上传文件数
    fileList = fileList.slice(-1);

    // 2. 从响应读取并显示文件链接
    fileList = fileList.map(file => {
      if (file.response) {
        // 组件将显示为链接file.url
        file.url = file.response.url;
      }
      return file;
    });

    this.setState({ fileList });
  };

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? "loading" : "plus"} />
        <div className="ant-upload-text">点击添加图片</div>
      </div>
    );
    const { imageUrl } = this.state;

    const props = {
      action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
      onChange: this.handleChange1,
      multiple: true
    };

    return (
      <div>
        <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false} style={{ borderBottom: "20px solid #f0f2f5" }}>
          <div className="allItem">
            <div>
              <Item label="菌株类别">
                <Radio.Group
                  onChange={this.onChange}
                  value={this.state.value}
                  className="radio"
                  style={{ width: 860 }}
                >
                  <Radio value={1}>放线菌</Radio>
                  <Radio value={2}>细菌</Radio>
                  <Radio value={3}>真菌</Radio>
                  <Radio value={4}>真菌（小型真菌）</Radio>
                  <Radio value={5}>真菌（酵母）</Radio>
                  <Radio value={6}>真菌（大型真菌）</Radio>
                  <Radio value={6}>其他类型</Radio>
                </Radio.Group>
              </Item>
              <Item label="候选菌株原始编号">
                {getFieldDecorator("id")(<Input />)}
              </Item>
              <Item label="候选菌株菌株近源菌株">
                {getFieldDecorator("gathering_place")}
                <Search
                  placeholder="放线菌"
                  enterButton="查询"
                  onSearch={value => console.log(value)}
                />
              </Item>
              <Item label="与近源菌株最高相似性">
                {getFieldDecorator("country")(<Input />)}
              </Item>
              <Item label="候选菌株序列" style={{ marginTop: 4 }}>
                <Upload
                  {...props}
                  // fileList={this.state.fileList}
                  style={{ display: "flex" }}
                  showUploadList={true}
                >
                  <Input style={{ width: 400 }} />
                  <Button
                    style={{
                      backgroundColor: "#1890ff",
                      borderColor: "#1890ff",
                      color: "#fff"
                    }}
                  >
                    上传
                  </Button>
                </Upload>
              </Item>
              <Item label="基因序列数据上传" style={{ marginTop: 4 }}>
                <Upload
                  {...props}
                  // fileList={this.state.fileList}
                  style={{ display: "flex" }}
                  showUploadList={true}
                >
                  <Input style={{ width: 400 }} />
                  <Button
                    style={{
                      backgroundColor: "#1890ff",
                      borderColor: "#1890ff",
                      color: "#fff"
                    }}
                  >
                    上传
                  </Button>
                </Upload>
              </Item>
              <Item label="采集样品编号">
                {getFieldDecorator("longitude")(<Input />)}
              </Item>
              <Item label="采集样品预处理方法">
                {getFieldDecorator("latitude")(<Input />)}
              </Item>
              <Item label="候选菌株分离/采集人员">
                {getFieldDecorator("altitude")(<Input />)}
              </Item>
            </div>
            {/* <div className="upload">
              <Item label="">
                菌株形态
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  beforeUpload={beforeUpload}
                  onChange={this.handleChange}
                >
                  {imageUrl ? (
                    <img
                      src={imageUrl}
                      alt="avatar"
                      style={{ width: "100%" }}
                    />
                  ) : (
                    uploadButton
                  )}
                </Upload>
              </Item>
            </div> */}
          </div>
          {/* <Item wrapperCol={{ span: 10, offset: 3 }}>
            <Row guuter={16}>
              <Col span={5}>
                <Button type="primary" htmlType="submit">
                  测序重排
                </Button>
              </Col>
            </Row>
          </Item> */}
        </Form>
        {/* <Table
          colSpan={2}
          columns={columns}
          dataSource={data}
          bordered
          style={{ marginLeft: 12 }}
        /> */}
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class StrainProduct extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default StrainProduct;
